<template>
    <div>
        <Form ref="formInline" :model="formInline" inline>
            <FormItem prop="company">
                <Input  v-model="formInline.company" placeholder="单位">
                </Input>
            </FormItem>
            <FormItem>
                <Button type="success" @click="search()">搜索</Button>
            </FormItem>
            <FormItem>
                <Button type="primary" icon="ios-cloud-upload-outline" @click="excelBtn()">数据导入</Button>
                <Button type="error" icon="ios-trash-outline" style="margin-left: 20px" @click="deleted()">一键清空</Button>
            </FormItem>
        </Form>
        <Table border :columns="columns12" :data="data6">
            <template slot="action">
                <Button type="primary" size="small" style="margin-right: 5px">修改</Button>
                <Button type="error" size="small" >删除</Button>
            </template>
        </Table>
        <Row type="flex" justify="end" class="pg">
            <Page :total="total" show-total @on-change="pageAction" show-elevator />
        </Row>
    </div>
</template>

<script>
import { getSpvUnitvehicleList, deleteSpvUnitvehicle } from '@/api/user'
export default {
  data () {
    return {
      total: 0,
      formInline: {
        batch_number: '',
        card_num: ''
      },
      columns12: [
        {
          title: '所属单位',
          key: 'company',
          align: 'center'
        },
        {
          title: '使用日期',
          key: 'date_of_use',
          align: 'center'
        },
        {
          title: '使用时间',
          key: 'usage_time',
          align: 'center'
        },
        {
          title: '使用人',
          key: 'use_name',
          align: 'center'
        },
        {
          title: '加油量',
          key: 'fuel',
          align: 'center'
        },
        {
          title: '金额',
          key: 'money',
          align: 'center'
        },
        {
          title: '加油车型',
          key: 'car_type',
          align: 'center'
        },
        {
          title: '油种',
          key: 'oil_species',
          align: 'center'
        },
        {
          title: '加油卡号',
          key: 'refueling_card',
          align: 'center'
        },
        {
          title: '加油前里程数',
          key: 'fuel_mileage',
          align: 'center'
        },
        {
          title: '油耗',
          key: 'oil_consumption',
          align: 'center'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: 150,
        //   align: 'center'
        // }
      ],
      data6: [],
      loading: true
      // headerField: [
      //   { title: '交易流水号', field: 'batch_number', minWidth: 300 },
      //   { title: '金额', field: 'money', minWidth: 300 }
      // ]
    }
  },

  props: {

  },

  components: {

  },

  computed: {

  },

  methods: {
    async init (data) {
      getSpvUnitvehicleList(data).then(ret => {
        this.data6 = ret.data.data.results
        this.total = ret.data.data.totalRecord
      })
    },
    excelBtn () {
      this.$router.push({
        name: 'rcindex'
      })
    },
    search () {
      const data = {
        company: this.formInline.company
      }
      this.init(data)
    },
    pageAction (current) {
      getSpvUnitvehicleList({ pageNo: current, company: this.formInline.company }).then(ret => {
        this.data6 = ret.data.data.results
      })
    },
    deleted () {
      this.$Modal.confirm({
        title: '确认要全部删除吗?',
        content: '<p>内容一旦删除将无法恢复</p>',
        loading: true,
        onOk: async () => {
          deleteSpvUnitvehicle().then(ret => {
            // console.log()
          })
          setTimeout(() => {
            this.$Modal.remove()
            this.$Message.success('删除成功')
          }, 1000)
        }
      })
    }
  },

  watch: {

  },

  mounted () {
    this.init()
  }

}
</script>

<style scoped>
    .pg{
        margin-top: 20px;
    }
</style>
